<template>
  <div>
    <el-dialog
      :title="formDate.id ? '编辑经纪' : '添加经纪'"
      :visible="dialogFormVisible"
      @close="closeFn"
    >
      <el-form
        ref="formDate"
        :rules="rules"
        :model="formDate"
        :label-position="labelPosition"
        label-width="80px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="formDate.name" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formDate.email" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="formDate.phone" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="formDate.address" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="formDate.desc" type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="封面">
          <UpdatePhone ref="updatephone" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="addFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import UpdatePhone from "@/views/manager/components/UpdatePhone.vue";
import { addmanager, getManager, editManager } from "@/api/manager";
export default {
  components: {
    UpdatePhone,
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formDate: {
        name: "4342342",
        email: "13213@qq.com",
        phone: "3242342",
        address: "4234234",
        desc: "234234",
        image: "",
      },
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        email: [{ required: true, message: "邮件不能为空", trigger: "blur" }],
        phone: [{ required: true, message: "电话不能为空", trigger: "blur" }],
        address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        desc: [{ required: true, message: "描述不能为空", trigger: "blur" }],
      },
      labelPosition: "right",
    };
  },
  methods: {
    // 关闭弹窗
    closeFn() {
      this.formDate = {
        name: "4342342",
        email: "13213@qq.com",
        phone: "3242342",
        address: "4234234",
        desc: "234234",
        image: "",
      };

      // 清空表单验证
      this.$refs.formDate.resetFields();
      // 清空上传组件图片数据
      this.$refs.updatephone.fileList = [];
      this.$emit("update:dialogFormVisible", false);
    },
    // 新增经纪
    async addFn() {
      // 表单验证
      await this.$refs.formDate.validate();
      this.formDate.image = this.$refs.updatephone.fileList[0].url;
      if (!this.formDate.id) {
        // 添加经纪
        await addmanager(this.formDate);
        this.$message.success("添加成功");
      } else {
        // 编辑经纪
        await editManager(this.formDate);
        this.$message.success("编辑成功");
      }
      this.closeFn();
      this.$emit("finish");
    },
    async editmanager(id) {
      if (id) {
        this.formDate = await getManager(id);
        this.$refs.updatephone.fileList.push({ url: this.formDate.image });
      }
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
